import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/common/local_storage.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:get/get.dart';

class SettingThemePage extends StatefulWidget {
  const SettingThemePage({super.key});

  @override
  State<SettingThemePage> createState() => _SettingThemePageState();
}

class _SettingThemePageState extends State<SettingThemePage> {
  late int themeMode;
  bool switching = false;
  @override
  void initState() {
    setState(() {
      themeMode = LocalStorage.instance.getItem<int>('theme.mode') ?? 0;
    });
    super.initState();
  }

  setThemeMode(type) async {
    if (switching) return;
    switching = true;
    setState(() {
      themeMode = type;
    });

    LocalStorage.instance.setItem('theme.mode', themeMode);
    bool isLight = themeMode == 1;
    if (type == 0) {
      isLight = MediaQuery.platformBrightnessOf(context) == Brightness.light;
    }
    await 0.2.delay();
    var mode = isLight ? ThemeMode.light : ThemeMode.dark;
    Get.changeThemeMode(mode);
    switching = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('主题设置'),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: UiTheme.spacingX),
        children: [
          const SizedBox(height: UiTheme.toolbarSpacing),
          UiPanel(
            child: UiListCell(
              padding: const EdgeInsets.only(
                  left: 15, right: 8, top: 10, bottom: 10),
              title: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('跟随系统'),
                  const SizedBox(height: 5),
                  Opacity(
                    opacity: 0.6,
                    child: Text(
                      '开启后，将跟随系统打开或关闭深色模式',
                      textScaler: const TextScaler.linear(0.85),
                      style: TextStyle(color: UiTheme(context).infoColor),
                    ),
                  ),
                ],
              ),
              backgroundColor: Colors.transparent,
              trailing: CupertinoSwitch(
                value: themeMode == 0,
                activeColor: UiTheme.primary,
                onChanged: (value) async {
                  int systemMode = MediaQuery.platformBrightnessOf(context) ==
                          Brightness.light
                      ? 1
                      : 2;
                  setThemeMode(value ? 0 : systemMode);
                },
              ),
            ),
          ),
          const UiLineBreak(),
          themeMode == 0
              ? Container()
              : Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 15.0, bottom: 5),
                      child: Text(
                        'Custom mode'.tr,
                        style: TextStyle(color: UiTheme(context).infoColor),
                      ),
                    ),
                    UiPanel(
                      children: [
                        UiListCell(
                          onTap: () {
                            setThemeMode(1);
                          },
                          backgroundColor: Colors.transparent,
                          title: Text('浅色模式'.tr),
                          showDivider: true,
                          trailing: AnimatedSwitcher(
                            duration: kThemeAnimationDuration,
                            child: themeMode == 1
                                ? Icon(
                                    Icons.check_outlined,
                                    color: UiTheme.of(context).primaryColor,
                                  )
                                : Container(),
                          ),
                        ),
                        UiListCell(
                          onTap: () {
                            setThemeMode(2);
                          },
                          backgroundColor: Colors.transparent,
                          title: Text('深色模式'.tr),
                          trailing: AnimatedSwitcher(
                            duration: kThemeAnimationDuration,
                            child: themeMode == 2
                                ? Icon(
                                    Icons.check_outlined,
                                    color: UiTheme.of(context).primaryColor,
                                  )
                                : Container(),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
        ],
      ),
    );
  }
}
